<template>
  <div style="width: 1024px;margin: 24px auto;">
    <el-row>
      <el-col :span="6" v-for="card in vehicleArr">
        <div class="hyl_card">
          <a  @click="toLongRentDetail(card.id)">
            <img :src="card.imgs" alt="" width="244px" height="172px" class="hyl_mainPic">
            <div class="hyl_cardMeg">
              <div style="margin: 0 0 5px;font-weight: bold;color: #333333;font-size: 15px;">
                {{ card.brandInfo }} <span>{{ transmissionTypeFormatter(card.transmissionType) }}</span>
              </div>
              <div style="color: #666666;margin: 0 0 13px;font-family: 'PingFang SC';font-size: 12px;">{{ card.plateNumber }}
                <span style="color: #FF6633;">{{ card.score }}.0分</span>
              </div>
              <div style="color: #FF4D3B;font-size: 12px;line-height: 27px">
                <span style="font-size: 18px;font-weight: bold;">{{ card.dayRentPrice *30}}</span>
                元/月均
              </div>
            </div>
          </a>
        </div>
      </el-col>
    </el-row>

    <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 15, 20]"
        v-model:current-page="currentPage"
        v-model:page-size="currentSize"
        v-model:total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="color: #2fe5a2"
    />
  </div>
</template>


<script setup>
import {onMounted, ref} from "vue";
import request from '@/utils/request';
import router from "@/router";
import qs from "qs";
import {ElMessage} from "element-plus";



const arr1 = ref(['关于凹凸','发展历程','媒体报道','品牌库','租车价格表','全国租车'])
const arr2 = ref(['平台规则','租车流程','服务条款','车主责任','隐私协议'])

const transmissionTypeFormatter = (cellValue)=>{
  if (cellValue==1){
    cellValue = '自动挡';
  }else if (cellValue==2){
    cellValue = '手动挡';
  }
  return cellValue;
}

const searchVehicleForm = ref({});
const vehicleArr = ref([]);
const loadVehicle = ()=>{
  //第一步:查询数据之前需要把当前页码以及每页显示多少条传给服务器
  searchVehicleForm.value.pageSize = currentSize.value;
  searchVehicleForm.value.pageNum = currentPage.value;

  let data = qs.stringify(searchVehicleForm.value);
  request.get('/vehicle/dayRentVehicleInfo/dayRentVehicleInfoQuery?'+data).then((response)=>{
    if (response.code===200){
      console.log('查看PageData返回的数据:')
      console.log(response.data)
      //vehicleArr.value = response.data;
      console.log(response.data.list)
      vehicleArr.value = response.data.list;//所以要多加一层list
      total.value = response.data.total;//设置总条目数
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  loadVehicle();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  loadVehicle();
}


onMounted(()=>{
  loadVehicle();
})
const toLongRentDetail=(id)=>{
  router.push({
    path: '/long_rent/detail',
    query: { id: id }
  })
}

</script>

<style scoped>
/*Head*/
.hyl_menu1 {
  width: 88px;
  height: 40px;
  padding: 0;
  position: absolute;
}

.hyl_menu2 {
  width: 96px;
  height: 40px;
  position: absolute;
  padding: 0;
}

.hyl_nav1:hover {
  display: block;
  width: 88px;
  height: 40px;
  background-color: #00CF97;
  font-weight: bold;
  line-height: 40px;
  color: #FFF;
  border-radius: 20px;
}

.hyl_nav2:hover {
  display: block;
  width: 96px;
  height: 40px;
  background-color: #00CF97;
  font-weight: bold;
  line-height: 40px;
  color: #FFF;
  border-radius: 20px;
}

/*Main*/
.hyl_card {
  height: 300px;
  width: 244px;
  margin: 0 15px 0 0;
  text-align: left;
}

.hyl_mainPic {
  transition: 0.5s;
  border-radius: 5px;
  cursor: pointer;
}

.hyl_mainPic:hover {
  transform: scale(1.05);
  border-radius: 5px;
}

.hyl_cardMeg {
  height: 110px;
  padding: 0 6px;
  margin-top: 6px;
}

/*Footer*/
.hyl_footerLink:hover {
  color: #FFFFFF77
}

.app-pagination {
  display: flex;
  justify-content: center;
}
</style>

<style>
.app-pagination .el-pagination.is-background .btn-next.is-active,
.app-pagination .el-pagination.is-background .btn-prev.is-active,
.app-pagination .el-pagination.is-background .el-pager li.is-active {
  background-color: #00bc93;
}
</style>
